<template>
  <div>
    <el-card class="box-card" shadow="hover" :header="titleName">
      <el-row>
        <el-col :span="12">
          <el-row>总计大小（GB）：{{systemData.totalCapacity}}</el-row>
          <el-row>已使用容量（GB）：{{systemData.usedCapacity}}</el-row>
          <el-row>剩余容量（GB）：{{systemData.remainingCapacity}}</el-row>
        </el-col>
        <el-col :span="12">
          <el-progress
              type="dashboard"
              :percentage="systemData.usedPercentage"
              :color="colors"
          />
        </el-col>
      </el-row>
    </el-card>
  </div>
</template>

<style scoped lang="less">
.box-card {
  width: 480px;
}
</style>

<script>
export default {
  name: "SystemResourceState",
  props:{
    systemData: {
      type: Object,
      default: () => ({
        usedPercentage: 0,
        totalCapacity: 0,
        usedCapacity: 0,
        remainingCapacity: 0
      })
    },
    titleName: {
      type: String,
      default: "Title"
    }
  },
  data() {
    return {
      colors: [
        {color: '#5cb87a', percentage: 30},
        {color: '#e6a23c', percentage: 60},
        {color: '#f56c6c', percentage: 80},
      ]
    }
  }
}
</script>
